<template>
    <div id="xieyi">
        <page-title><span slot="pageName">{{ FormData.id ? "修改协议" : "添加协议" }}</span></page-title>
        <div class="content">
            <el-form label-width="80px" label-position="left">
                <el-form-item label="标题">
                    <el-input v-model="FormData.title"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch
                    v-model="FormData.status"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-value="1"
                    active-text="显示"
                    inactive-text="隐藏"
                    inactive-value="2">
                </el-switch>
                </el-form-item>
            </el-form>
            <vue-ueditor-wrap v-model="FormData.content" :config="myConfig" ></vue-ueditor-wrap>
        </div>
        <div class="btn_box">
            <el-button type="primary" @click="SubData">提交</el-button>
        </div>
    </div>
</template>

<script>
    import PageTitle from '@/components/PageTitle'
    import VueUeditorWrap from 'vue-ueditor-wrap'
    export default {
        components: {
                  PageTitle,
                  VueUeditorWrap
        },
        computed: {
            FormData() {
                return this.$store.state.FormData
            },
            token() {
                return this.$store.state.token;
            }
        },
        data() {
            return {
                msg: "",
                
                myConfig: {
                    // 编辑器不自动被内容撑高
                    autoHeightEnabled: false,
                    // 初始容器高度
                    initialFrameHeight: 400,
                    // 初始容器宽度
                    initialFrameWidth: '100%',
                    // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                    serverUrl: 'http://www.awoojing.club/UEditor/php/controller.php',
                    // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                      UEDITOR_HOME_URL: '/static/UEditor/',
                    //   UEDITOR_HOME_URL: '/webadmin/static/UEditor/'
                }
            }
        },
        methods: {
            // 提交协议
            async SubData() {
                let { title, status, content } = this.FormData
                if(!title) {
                    this.$message.error("请输入协议标题")
                    return false
                } else if(!content) {
                    this.$message.error("请输入协议内容")
                    return false
                } else {
                    this.FormData.token = this.token
                    console.log(this.FormData);
                    
                    let res = await this.$axios.post("/admin/user/protocol", this.FormData)
                    console.log(res);
                    if(res.data.code == 202) {
                        this.$message.success("添加成功")
                        this.FormData = {}
                        this.$router.push("/xieyilist")
                    } else {
                        this.$message.error("添加失败")
                        return false
                    }
                    
                }
                
            }
        }
    }
</script>

<style lang="scss" scoped>
.btn_box {
    margin: 20px 0;
}
.el-form-item {
    width: 600px;
    text-align: left;
}
</style>